<template>
  <div class="recommend-wrap">
    <div class="rem-title">
          <span class="iconfont icon-xin" ></span>
          <span>猜你喜欢</span>
    </div>
    <ul class="rem-item">
     <router-link
     to=""
     tag="li"
     class="item"
     v-for='(list,index) in recommendlist'
     :key='index'
     >

      <div class="item-img">
        <img :src="list.imgUrl" alt="">
        <p>{{list.imgBadge}}</p>
      </div>
     <div class="item-info">
       <div class="info-title">{{list.infotitlel}}</div>
       <!-- 插件 -->
       <div class="info-com">
         <star :rating='list.infoRate'></star>
         <span class="com-num">{{list.infoComment}}条评论</span>
         </div>
       <div class="info-desc">
         <p class="price"><span>￥{{list.infoPrice}}</span>起</p>
         <p class="location">{{list.infoLocation}}</p>
       </div>
     </div>
     </router-link>
    </ul>
    <div class="seeMore">
		<router-link to="">
			查看所有产品
		</router-link>
		</div>
  </div>
</template>

<script>
  import Star from'@/components/star'
  export default{
    name:'HomeRecommend',
    props:['recommendlist'],
   data () {

     return {

     }
   },
   components:{
     Star
   }
  }
</script>

<style scoped="scoped">
  .rem-title{
    line-height: 0.8rem;
    padding: 0.2 0.15rem;
  }
  .rem-title .icon-xin{
    color: orange;
  }
  .item{
    height: 2.2rem;
    display: flex;
    flex-direction: row;
    padding: 0.15rem;
    background-color: #fff;
    border-bottom: rgb(245,245,245);
  }
  .item-img{
    width: 30%;
    position: relative;
  }
  .item-img img{
    width: 100%;
    height: 100%;
  }
  .item-img p{
    position: absolute;
    left: 0;
    top: 0;
    padding: 0.05rem;
    font-size: 0.14rem;
    background-color: orange;
    color: #fff;
    border-radius:0 0 0.2rem 0 ;
  }
  .item-info{
  flex:1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  }
   .item-info .info-title{
     font-size: 0.35rem;
     margin-bottom: 0.25rem;
   }
 .info-com .com-num {
        color: gray;
        font-size: 0.1rem;
   }
   .info-desc{
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     margin-top:0.2rem;
    align-items: center;
   }
   .info-desc .price{
     font-size: 0.4rem;
     color: orange;
   }
   .seeMore{
     height: 0.8rem;
     background-color: #fff;
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
   }
</style>
